import{createRouter,createWebHashHistory} from "vue-router"

const Home = () => import('../views/Home.vue');
const About = () => import('../views/About.vue');
const UserCenter=()=> import("../views/user-center/index.vue");
const UserProfile=()=> import("../views/user-center/Profile.vue");
const UserSetting=()=> import("../views/user-center/Setting.vue");

const Product=() =>import("../views/Product.vue");

//404
const NotFound =()=> import("../views/404.vue");

const VuexPage = ()=> import("../views/Vuex.vue");

const routes =[
    
    {
        path:'/vuex',
        name:'vuex',
        component: VuexPage
    
    },

   
    {path:'/',
    name:'home',
    component:Home
},
{
    path:'/product/:id',
    name:'product',
    component:Product
},
    
    {
        path:'/about',
        name:'about',
        component:About
    },
    {
        path:"/user",
        name:"userCenter",
        component:UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:"profile",
                name:"profile",
                component:UserProfile
            },
            {
                path:"settings",
                name:"settings",
                component:UserSetting
            },
        ],
    },
   





    {
        path:'/:pathMatch(.*)*',
        name :'NotFound',
        component:NotFound
    }
];



const router = createRouter({
    history:createWebHashHistory(),
    routes
})

 //导航 前置守卫
 router.beforeEach((to,from,next)=>{
    console.log('to',to);
    console.log('from',from);
    next()
})

//后置守卫
router.afterEach((to,from,next)=>{
    console.log('afterEach=====');
    console.log('to',to);
    console.log('from',from);
    
})

export default router

